<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变形转换</title>
    <style>
        .container{
            width: 600px;
            margin:  100px auto;
            outline: 1px solid red;
        }
        html{
            height: 4000px;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: rgb(192, 118, 118);
            outline: 1px solid black;
            transition: all 2s;
        }

        .b1 {
            /* position: relative; */
            left: 100px;
            top: 200px;
            transition: all 0.5s;
            /* position: absolute; */
        }

        .b2 {
            /* transform: translate(100px,50px); */
        }

        .btn {
            width: 100px;
            height: 50px;
            background-color: rgb(201, 236, 187);
        }

        .btn:hover~.b1 {
            transform: translateX(500px);
        }
        .rx{
            transition: all 2s;
        }
        .rx:hover{
            transform: rotate(720deg);
        }
        /*  */
        .sc:hover{
            /* transform: scale(2,0.5); */
            /* transform: scaleX(2); */
            transform: scaleY(2);

        }
        .rj:hover{
            /* 多个可以属性值要写在一个transfrom里面然后用空格分开 */
            transform: rotate(360deg) translateY(-50px);


        }
        .to{
            float: left;
            margin-left: 50px;
        }
        .to:hover{
            transform: rotate(360deg);
        }
    .t1{
        transform-origin: 0 0;
        /* transform-origin: 50% 50%; */
    }
    .t2{
        transform-origin: 100% 100%;
    }
    .t2{
        transform-origin: 10px 20px
    }
    .t3{
        transform-origin: 200px 200px
    }
    </style>
</head>

<body>
    <div class="container">


        <!-- 
        translate 和相对定位区别 
        1.transform：translate()可以用于以及相对/绝对定位的元素之上
        2.translate也不会改变元素的显示属性
        3.translate主要用于元素的动画或者过渡

    -->
        <div class="btn"></div>
        <div class="box b1">
            b1
        </div>
        <div class="box b2">
            b2
        </div>
        <h2>旋转</h2>
        <div class="rx box">x轴</div>
        <h2>变大变小</h2>
        <div class="sc box"></div>
        <h2>旋转跳跃</h2>
        <div class="rj box">旋转跳跃</div>
        <h2>transform-origin</h2>
        <div class="to box t1"></div>
        <div class="to box t2"></div>
        <div class="to box t3"></div>
    </div>
</body>

</html>